<template>
  <view class="bg-[#f5f5f5] min-h-screen p-[30rpx]">
    <!-- 头部 -->
    <view class="bg-white rounded-[20rpx] p-[40rpx] mb-[30rpx] shadow-md">
      <text class="text-[36rpx] font-bold text-[#333] block mb-[20rpx]">腾讯地图地址解析演示</text>
      <text class="text-[26rpx] text-[#666]">输入地址，自动获取经纬度坐标</text>
    </view>

    <!-- 地址输入 -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] mb-[30rpx] shadow-md">
      <text class="text-[30rpx] font-bold text-[#333] block mb-[20rpx]">地址输入</text>
      <view class="flex gap-[20rpx]">
        <input
          v-model="inputAddress"
          type="text"
          class="flex-1 p-[20rpx] border-2 border-[#ddd] rounded-[12rpx] text-[26rpx]"
          placeholder="请输入地址，如：北京市海淀区中关村大街1号"
        />
        <nut-button 
          type="primary"
          @click="handleGeocode"
          :loading="isLoading"
        >
          解析
        </nut-button>
      </view>
    </view>

    <!-- 解析结果 -->
    <view v-if="geocodeResult" class="bg-white rounded-[20rpx] p-[30rpx] mb-[30rpx] shadow-md">
      <text class="text-[30rpx] font-bold text-[#333] block mb-[20rpx]">解析结果</text>
      
      <view class="space-y-[20rpx]">
        <!-- 地址信息 -->
        <view class="bg-[#f8f9fa] rounded-[12rpx] p-[20rpx]">
          <text class="text-[26rpx] font-bold text-[#333] block mb-[10rpx]">地址信息</text>
          <text class="text-[24rpx] text-[#666]">{{ geocodeResult.address }}</text>
        </view>

        <!-- 坐标信息 -->
        <view class="bg-[#e3f2fd] rounded-[12rpx] p-[20rpx]">
          <text class="text-[26rpx] font-bold text-[#1976d2] block mb-[10rpx]">坐标信息</text>
          <view class="flex gap-[30rpx]">
            <view>
              <text class="text-[24rpx] text-[#666]">纬度：</text>
              <text class="text-[24rpx] font-bold text-[#1976d2]">{{ geocodeResult.latitude }}</text>
            </view>
            <view>
              <text class="text-[24rpx] text-[#666]">经度：</text>
              <text class="text-[24rpx] font-bold text-[#1976d2]">{{ geocodeResult.longitude }}</text>
            </view>
          </view>
        </view>

        <!-- 地区信息 -->
        <view class="bg-[#e8f5e9] rounded-[12rpx] p-[20rpx]">
          <text class="text-[26rpx] font-bold text-[#388e3c] block mb-[10rpx]">地区信息</text>
          <text class="text-[24rpx] text-[#666]">{{ geocodeResult.name }}</text>
        </view>
      </view>
    </view>

    <!-- 错误信息 -->
    <view v-if="errorMessage" class="bg-white rounded-[20rpx] p-[30rpx] mb-[30rpx] shadow-md border-l-4 border-[#f44336]">
      <text class="text-[30rpx] font-bold text-[#f44336] block mb-[20rpx]">解析失败</text>
      <text class="text-[26rpx] text-[#666]">{{ errorMessage }}</text>
    </view>

    <!-- 使用说明 -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-md">
      <text class="text-[30rpx] font-bold text-[#333] block mb-[20rpx]">使用说明</text>
      <view class="space-y-[15rpx]">
        <view class="flex items-start">
          <text class="text-[#1976d2] mr-[10rpx] mt-[8rpx]">•</text>
          <text class="text-[24rpx] text-[#666] flex-1">输入完整地址，包含省市区信息</text>
        </view>
        <view class="flex items-start">
          <text class="text-[#1976d2] mr-[10rpx] mt-[8rpx]">•</text>
          <text class="text-[24rpx] text-[#666] flex-1">系统会自动解析出经纬度坐标</text>
        </view>
        <view class="flex items-start">
          <text class="text-[#1976d2] mr-[10rpx] mt-[8rpx]">•</text>
          <text class="text-[24rpx] text-[#666] flex-1">解析结果包含详细的结构化地址信息</text>
        </view>
        <view class="flex items-start">
          <text class="text-[#f44336] mr-[10rpx] mt-[8rpx]">•</text>
          <text class="text-[24rpx] text-[#666] flex-1">请确保已配置腾讯地图API密钥</text>
        </view>
      </view>
    </view>

    <!-- 示例地址 -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-md">
      <text class="text-[30rpx] font-bold text-[#333] block mb-[20rpx]">示例地址</text>
      <view class="space-y-[15rpx]">
        <view 
          v-for="(example, index) in exampleAddresses" 
          :key="index"
          class="bg-[#f8f9fa] rounded-[12rpx] p-[20rpx] cursor-pointer hover:bg-[#e9ecef] transition-colors"
          @click="inputAddress = example"
        >
          <text class="text-[24rpx] text-[#333]">{{ example }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { geocodeAddress, validateAddress, formatAddress } from '@/utils/geocoder'
import { isApiKeyConfigured } from '@/utils/mapConfig'

/**
 * 地址解析演示组件
 * @description 演示如何使用腾讯地图API进行地址解析
 */

// 响应式数据
const inputAddress = ref('')
const geocodeResult = ref<any>(null)
const errorMessage = ref('')
const isLoading = ref(false)

// 示例地址
const exampleAddresses = ref([
  '北京市海淀区中关村大街1号',
  '上海市浦东新区陆家嘴环路1000号',
  '广州市天河区珠江新城花城大道85号',
  '深圳市南山区科技园南区深圳湾科技生态园',
  '杭州市西湖区文三路259号'
])

/**
 * 处理地址解析
 */
const handleGeocode = async () => {
  if (!inputAddress.value.trim()) {
    Taro.showToast({
      title: '请输入地址',
      icon: 'none'
    })
    return
  }

  // 检查API密钥配置
  if (!isApiKeyConfigured()) {
    errorMessage.value = '腾讯地图API密钥未配置，请先配置API密钥'
    geocodeResult.value = null
    return
  }

  isLoading.value = true
  errorMessage.value = ''
  geocodeResult.value = null

  try {
    const result = await geocodeAddress(inputAddress.value)
    
    if (result.address === '地址解析失败，请手动选择') {
      throw new Error('地址解析失败')
    }
    
    geocodeResult.value = result
    
    Taro.showToast({
      title: '解析成功',
      icon: 'success'
    })
  } catch (error: any) {
    errorMessage.value = error.message || '地址解析失败，请检查地址是否正确'
    
    Taro.showToast({
      title: '解析失败',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="scss">
// 自定义样式
</style> 